<template>
  <div class="connection-status">
    <span class="status-indicator" :class="statusClass"></span>
    <span class="status-text" v-if="showText">{{ statusText }}</span>
  </div>
</template>

<script>
export default {
  name: 'ConnectionStatus',
  props: {
    connected: {
      type: Boolean,
      default: false
    },
    connecting: {
      type: Boolean,
      default: false
    },
    showText: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    statusClass() {
      if (this.connecting) return 'connecting'
      return this.connected ? 'connected' : 'disconnected'
    },
    statusText() {
      if (this.connecting) return this.$t('common.connecting') || '连接中'
      return this.connected ? (this.$t('common.connected') || '已连接') : (this.$t('common.disconnected') || '未连接')
    }
  }
}
</script>

<style lang="scss" scoped>
.connection-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.status-indicator {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  transition: all 0.3s ease;
  
  &.disconnected {
    background: radial-gradient(circle at 30% 30%, #b4b7bd, #909399);
    box-shadow: 
      0 0 8px rgba(144, 147, 153, 0.3),
      inset 0 1px 2px rgba(0, 0, 0, 0.2);
    animation: dim-glow 3s infinite;
  }
  
  &.connecting {
    background: radial-gradient(circle at 30% 30%, #f5c654, #E6A23C);
    box-shadow: 
      0 0 15px rgba(230, 162, 60, 0.6),
      0 0 30px rgba(230, 162, 60, 0.3),
      inset 0 1px 2px rgba(255, 255, 255, 0.3);
    animation: connecting-pulse 1s infinite;
    
    &::before {
      content: '';
      position: absolute;
      top: -2px;
      left: -2px;
      right: -2px;
      bottom: -2px;
      border-radius: 50%;
      border: 2px solid transparent;
      border-top-color: #E6A23C;
      animation: spin 1s linear infinite;
    }
  }
  
  &.connected {
    background: radial-gradient(circle at 30% 30%, #85e653, #67C23A);
    box-shadow: 
      0 0 20px rgba(103, 194, 58, 0.8),
      0 0 40px rgba(103, 194, 58, 0.4),
      inset 0 1px 3px rgba(255, 255, 255, 0.4);
    animation: connected-glow 2s infinite;
    
    &::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 100%;
      height: 100%;
      border-radius: 50%;
      border: 2px solid #67C23A;
      animation: ripple 2s infinite;
    }
    
    &::before {
      content: '';
      position: absolute;
      top: 20%;
      left: 30%;
      width: 3px;
      height: 3px;
      background: rgba(255, 255, 255, 0.8);
      border-radius: 50%;
      animation: shine 2s infinite;
    }
  }
}

@keyframes dim-glow {
  0%, 100% {
    opacity: 0.5;
  }
  50% {
    opacity: 0.8;
  }
}

@keyframes connecting-pulse {
  0% {
    transform: scale(1);
    box-shadow: 
      0 0 15px rgba(230, 162, 60, 0.6),
      0 0 30px rgba(230, 162, 60, 0.3),
      inset 0 1px 2px rgba(255, 255, 255, 0.3);
  }
  50% {
    transform: scale(1.1);
    box-shadow: 
      0 0 20px rgba(230, 162, 60, 0.8),
      0 0 40px rgba(230, 162, 60, 0.5),
      inset 0 1px 2px rgba(255, 255, 255, 0.3);
  }
  100% {
    transform: scale(1);
    box-shadow: 
      0 0 15px rgba(230, 162, 60, 0.6),
      0 0 30px rgba(230, 162, 60, 0.3),
      inset 0 1px 2px rgba(255, 255, 255, 0.3);
  }
}

@keyframes connected-glow {
  0%, 100% {
    box-shadow: 
      0 0 20px rgba(103, 194, 58, 0.8),
      0 0 40px rgba(103, 194, 58, 0.4),
      inset 0 1px 3px rgba(255, 255, 255, 0.4);
  }
  50% {
    box-shadow: 
      0 0 25px rgba(103, 194, 58, 1),
      0 0 50px rgba(103, 194, 58, 0.6),
      inset 0 1px 3px rgba(255, 255, 255, 0.4);
  }
}

@keyframes ripple {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.8;
  }
  100% {
    transform: translate(-50%, -50%) scale(2);
    opacity: 0;
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes shine {
  0%, 100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

.status-text {
  font-size: 12px;
  color: #606266;
}
</style>